<template>
  <view>
    <view v-for="(item, index) in iframes" :key="index" style="height: 500rpx" class="p-1">
      <!-- <web-view :src="item"></web-view> -->
      <iframe :src="item" frameborder="0" class="block w-full h-full" :id="`iframe${index}`"></iframe>
    </view>
  </view>
</template>

<script>
/* eslint-disable max-len */
const iframes = [
  'https://uniapp.dcloud.io/static/web-view.html',
  'https://baidu.com',
  'https://uland.taobao.com/semm/tbsearch?refpid=mm_26632258_3504122_32554087&keyword=%E5%A5%B3%E8%A3%85&clk1=ad91ec4906f3ffe8328566a1bf604aef&upsId=ad91ec4906f3ffe8328566a1bf604aef',
  'https://m.jd.com/',
  'https://www.ccsens.com',
  'https://www.tall.wiki/wl/1',
  'https://h5.m.jd.com/active/yard-channel/index.html?themeId=24883&babelChannel=356440&innerLink=%5B%7B%22matId%22%3A%223203085%22%7D%2C%7B%22matId%22%3A%223205226%22%7D%5D&themeStyle=0&innerIndex=1',
  'https://mitem.jd.hk/product/3205226.html?pdtk=ZenDw7dK%2FC8XmpuZbhgbkp%2BSbyLL5R0S14AvHWdeeAL2Z36jPKDzWg%2BYBNa0HgvE&_fd=jdm&sid=null',
  'https://shop.m.jd.com/shopv2/mzpage?shopId=1000015205&venderId=1000015205&skuId=3205226&categoryId=1319_1523_7052&sceneval=2&jxsid=16243458685744852366&_fd=jdm&_fd=jdm',
  'https://www.tall.wiki/wl/2',
  'https://www.tall.wiki/wl/3',
  'https://www.tall.wiki/wl/4',
  'https://www.tall.wiki/wl/5',
  'https://www.tall.wiki/wl/7',
  'https://www.tall.wiki/wl/6',
];
/* eslint-enable max-len */
export default {
  data() {
    return { iframes, createdTime: 0, mountedTime: 0 };
  },

  created() {
    this.createdTime = Date.now();
    console.error('created:', new Date().toLocaleString());
  },

  mounted() {
    this.mountedTime = Date.now();
    console.error('mounted:', new Date().toLocaleString());
    this.$nextTick(this.init);
  },

  methods: {
    init() {
      this.iframes.forEach((item, index) => {
        const element = document.getElementById(`iframe${index}`);
        element.addEventListener(
          'load',
          () => {
            const now = Date.now();
            console.error(`${index} ${item} 加载结束`, new Date().toLocaleString(), now - this.createdTime, now - this.mountedTime);
          },
          false,
        );
      });
    },
  },
};
</script>
